<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>护工任务实时统计</title>
	<script src="js/jquery.js" type="text/javascript"></script>
	<link href="./css/comon0.css" rel="stylesheet" type="text/css">
</head>
<script>
	$(window).load(function () {
		$(".loading").fadeOut()
	})

	/****/
	$(document).ready(function () {
		var whei = $(window).width()
		$("html").css({
			fontSize: whei / 20
		})
		$(window).resize(function () {
			var whei = $(window).width()
			$("html").css({
				fontSize: whei / 20
			})
		});
	});
</script>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/echarts.js"></script>
<!-- <script src="js/echarts-liquidfill.js"></script> -->

<body>
	<div class="loading">
		<div class="loadbox"><img src="picture/loading.gif"> 页面加载中...</div>
	</div>

	<div class="mainbox" id="app">
		<div style="width: 100%; height: 9rem; margin-top: .7rem;">
			<div ref="barStackRef" style="height: 8.6rem; margin-top: .2rem;"></div>
			<div style="height: .4rem; width: 100%; display: flex; align-items: center; justify-content: center;">
				<div v-for="(primary, index) in primarys" :key="index">
					<div :class="['default-indicator', showDateIndex === index ? 'select-indicator' : '']"
						@click="changeShowDate(index)"></div>

				</div>
			</div>
		</div>

		<div style="width: 0.6rem;height: 0.6rem;position: absolute;bottom: 0.6rem;right: .8rem;">
			<img @click="toIndexPage" src="images/switch_page2.png" />
		</div>

	</div>

</body>

<script type="text/javascript">
	new Vue({
		el: '#app',
		data: function () {
			return {
				httpUrl: "http://222.71.175.10:1111",
				// httpUrl: "http://192.168.1.128:82",

				pageShowCount: 10, // 一页展示数量
				primarys: [ // 主任务数量
					// [0, 18, 10, 16, 13, 7, 21, 0, 0, 11],
				],
				secondarys: [ // 辅助任务数量
					// [12, 1, 10, 16, 13, 7, 21, 0, 5, 11],
				],
				names: [ // 护工姓名列表
					// ["测**工", "阮*泽", "姜*勇", "*超", "朱*荣", "姚*友", "李*山", "吴*华", "*光", "易*学"]
				],
				showDateIndex: 0,
				autoSwitchBarStackInterval: null, // 用于存储定时器ID

				switchPageTimes: 0,  // 页面切换时间

			}
		},
		mounted() {
			// this.getHgOrderCountStatistics();
			this.getHgOrderCountStatistics().then(() => {
				if (this.isValidNumber(this.switchPageTimes)) {
					this.switchPageTimes = parseInt(this.switchPageTimes, 10);
					this.startPageSwitch();
				}
			});

			setInterval(() => {
				this.getHgOrderCountStatistics();
			}, 60 * 1000 * 2);

			setTimeout(() => {
				this.barStackUI();
				this.startAutoSwitchBarStack(); // 组件挂载后启动自动切换
			}, 200);

		},
		beforeDestroy() {
			this.stopAutoSwitchBarStack(); // 组件销毁前清除定时器
		},
		computed: {

		},
		methods: {

			getHgOrderCountStatistics() {

				return new Promise((resolve, reject) => {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/hgOrderCountStatistics';
					let self = this;
					const requestData = {
						surgicalNumber: "001",			// 没用到
						splitCount: this.pageShowCount,	// 一次性展示个数 不传或传0 默认10
						isHide: 0,						// 是否隐藏姓名 0否1是 不传默认1
						orderBy: "DESC",				// 返回结果升降序 不传默认DESC
						isFull: 0,						// 最后一页数量不足时是否补齐--0否1是  不传默认1
						filterName: ["术源测试", "测试护工"],		// 不展示人员列表
					};
					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						processData: false,
						contentType: false,
						success(res) {
							console.log("+++++ 护工任务完成数量统计接口 请求成功++++++++");
							console.log(res.data);

							if (res.code == '1') {

								self.primarys = res.data.primarys;
								self.secondarys = res.data.secondarys;
								self.names = res.data.names;

								if (res.data.switchPageTimes && self.isValidNumber(res.data.switchPageTimes)) {
									self.switchPageTimes = parseInt(res.data.switchPageTimes, 10);

								}
								localStorage.setItem('switchPageTimes', self.switchPageTimes);

								self.barStackUI();
								resolve();

							} else {
								reject();
							}

						},
						error(err) {
							console.log('护工任务完成数量统计接口 请求失败')
							reject();
						},

					})

				})
			},

			async barStackUI() {

				// 计算根字体大小
				function setFontSize() {
					var whei = $(window).width();
					$("html").css({
						fontSize: whei / 20 // 设置根字体大小
					});
					return whei / 20; // 返回根字体大小
				}

				var rootFontSize = setFontSize(); // 初始计算字体大小

				$(window).resize(function () {
					rootFontSize = setFontSize(); // 当窗口尺寸变化时重新计算根字体大小
				})

				await this.$nextTick();
				const chartContainer = this.$refs.barStackRef;

				if (this.echartsInstance1) {
					this.echartsInstance1.dispose();
				}

				this.echartsInstance1 = echarts.init(chartContainer);
				this.echartsInstance1.showLoading({
					text: '加载中',
					color: '#e8d8d7',
					textColor: '#dfd6d6',
					maskColor: 'rgba(30, 31, 37, 1)',
					zlevel: 0,
				}); // 显示


				this.echartsInstance1.clear();
				this.echartsInstance1.hideLoading(); // 隐藏

				this.echartsInstance1.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: function (params) {
							let total = 0;
							params.forEach(param => {
								total += param.value;
							});
							return [
								params[0].name + '<br/>',
								params[0].seriesName + ': ' + params[0].value + '<br/>',
								params[1].seriesName + ': ' + params[1].value + '<br/>',
								'总和: ' + total
							].join('');
						}
					},
					legend: {
						data: ['主导任务数量', '辅助任务数量'],
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: rootFontSize * 0.2,
						},
					},
					grid: {
						top: '8%',
						left: '5%',
						right: '5%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						name: '人名',
						data: this.names[this.showDateIndex],
						axisLabel: {
							color: '#B0B8CD',
							fontSize: rootFontSize * 0.2,
						},
						axisTick: { // 坐标轴刻度线
							show: false,
						},
					}],
					yAxis: [{
						type: 'value',
						name: '任务数量(个)',
						axisLabel: {
							color: '#B0B8CD',
							fontSize: rootFontSize * 0.2,
						},
						splitLine: { // 网格线
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#282C38'
							},
						},
					}],
					series: [
						{
							name: '辅助任务数量',
							type: 'bar',
							stack: 'Ad',
							label: {
								show: true,
								position: 'inside',
								formatter: (params) => {
									return params.value > 0 ? `${params.value}(辅)` : '';
								},
								color: '#fff',
								fontSize: rootFontSize * 0.21,
							},
							itemStyle: {
								color: '#017DD3',
							},
							data: this.secondarys[this.showDateIndex],
						},
						{
							name: '主导任务数量',
							type: 'bar',
							stack: 'Ad',
							label: {
								show: true,
								position: 'inside',
								formatter: (params) => {
									return params.value > 0 ? `${params.value}(主)` : '';
								},
								color: '#fff',
								fontSize: rootFontSize * 0.21,
							},
							itemStyle: {
								color: '#06B2B5',
							},
							data: this.primarys[this.showDateIndex],
						},
						{
							name: '总和',
							type: 'bar',
							stack: 'Ad',
							barMaxHeight: 0,
							label: {
								show: true,
								position: 'top',
								formatter: (params) => {
									const total = this.primarys[this.showDateIndex][params
										.dataIndex
									] + this.secondarys[this.showDateIndex][params
										.dataIndex
										];
									return total;
								},
								color: '#fff',
								fontSize: rootFontSize * 0.24,
								fontWeight: 'bold',

							},
							data: this.primarys[this.showDateIndex].map((_, index) => 0)
						}

					]

				});

				window.addEventListener(
					'resize',
					() => {
						setTimeout(() => {
							this.echartsInstance1.resize()
						}, 200)
					},
					false,
				);
				this.echartsInstance1.hideLoading();

			},

			changeShowDate(index) { // 点击切换展示数据
				this.showDateIndex = index;
				this.barStackUI();
			},
			// 定时切换展示数据  柱状统计图 
			startAutoSwitchBarStack() {
				if (this.autoSwitchBarStackInterval) clearInterval(this.autoSwitchBarStackInterval);

				this.autoSwitchBarStackInterval = setInterval(() => {
					// 每十秒切换一次
					this.showDateIndex = (this.showDateIndex + 1) % this.primarys.length;
					this.barStackUI();
				}, 10000);
			},

			// 停止自动切换
			stopAutoSwitchBarStack() {
				if (this.autoSwitchBarStackInterval) clearInterval(this.autoSwitchBarStackInterval);
			},

			// 判断是否是有效的数字或字符串数字 且大于0
			isValidNumber(value) {
				let numberValue = Number(value);
				return !isNaN(numberValue) && numberValue > 0;
			},

			// 跳转页面
			toIndexPage() {
				window.location.href = 'index2.html';
			},
			// 页面切换
			startPageSwitch() {
				setInterval(() => {
					this.toIndexPage();
				}, this.switchPageTimes);
			},

		}

	})
</script>

<style type="text/css">
	div {
		box-sizing: border-box;
	}

	.default-indicator {
		width: 0.11rem;
		height: .11rem;
		margin: 0.11rem;
		border-radius: 50%;
		background-color: aliceblue;
	}

	.select-indicator {
		background: linear-gradient(90deg, #007CD3 0%, #3BC7CF 100%, #3BC8CF 100%, #3AC9CE 100%);
	}
</style>

</html>